<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:include="include :: header('新增劳务派遣简历管理')" />
    <th:block th:include="include :: datetimepicker-css" />
    <th:block th:include="include :: bootstrap-fileinput-css"/>
    <style type="text/css">
    .user-info-head{
        position:relative;display:inline-block;
        width: 100%;
        height: 100%;
    }
    .user-info-head:hover:after
    {
        content:'\f030';
        position:absolute;
        left:0;
        right:0;
        top:0;
        bottom:0;
        color:#eee;
        background:rgba(0,0,0,0.2);
        font-family:FontAwesome;
        font-size:24px;
        font-style:normal;
        -webkit-font-smoothing:antialiased;
        -moz-osx-font-smoothing:grayscale;
        cursor:pointer;line-height:150px;
    }
    </style>
</head>
<style>
    .jltable{
        margin: auto;
    }
    .jltable th,td{
        min-height: 40px;
        min-width: 50px;
        border: 1px solid #eee;
        padding: 10px;
    }
    .avatar-container{
        cursor: pointer;
        width: 150px;
        height: 150px;
        position: relative;
    }
</style>
<body class="white-bg">
    <div class="wrapper wrapper-content animated fadeInRight ibox-content">
        <form class="form-horizontal m" id="form-jl-add">
            <h4 class="form-header h4">基本信息</h4>

            <table class="jltable">
                <tbody>
                    <tr>
                        <td>  <label class="control-label is-required">姓名：</label> </td>
                        <td>  <input name="name" class="form-control" type="text" required> </td>
                        <td>  <label class="control-label">性别：</label></td>
                        <td>  <select name="sex" class="form-control" th:with="type=${@dict.getType('sys_user_sex')}">
                                <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"></option>
                              </select>
                        </td>
                        <td colspan="2" rowspan="3">
                            <div  class="avatar-container text-center">
                                <input  type="hidden" name="avatar">
                                <p class="user-info-head" onclick="avatar()">
                                    <img id="avatarImg" style="width: 100%;height: 100%" src=""
                                         th:onerror="'this.src=\'' + @{'/img/profile.jpg'} + '\''"/>
                                </p>
                                <p><a href="javascript:avatar()"></a></p>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td style="height: 50px">   <label class="control-label is-required">身份证：</label> </td>
                        <td>  <input name="sfzh" class="form-control" type="text" required maxlength="18"> </td>
                        <td>  <label class=" control-label">年龄：</label></td>
                        <td>   <input style="width: 100px" name="age" class="form-control" type="number"></td>
                    </tr>
                    <tr>
                        <td>  <label class=" control-label">户籍：</label> </td>
                        <td> <input name="hj" class="form-control" type="text"></td>
                        <td>  <label class="control-label">学历：</label></td>
                        <td>   <select name="xl" class="form-control" th:with="type=${@dict.getType('xueli')}">
                            <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"></option></select>
                        </td>
                    </tr>

                    <tr> </tr>
                </tbody>
            </table>

            <h4 class="form-header h4" style="margin-top: 30px">人员状态信息</h4>
            <table class="jltable">
                <tbody>
                    <tr>
                        <td>  <label class="control-label is-required">人员状态：</label>  </td>
                        <td>
                            <select name="zt" class="form-control" th:with="type=${@dict.getType('lwpq_jl_ryzt')}" required>
                                <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"></option>
                            </select>
                        </td>
                        <td></td>
                        <td>  <label class="control-label">联系电话：</label> </td>
                        <td>  <input name="dh" class="form-control" type="text" maxlength="11"> </td>
                    </tr>
                    <tr>
                        <td> <label class=" control-label">工作年限：</label></td>
                        <td> <input name="nx" class="form-control" type="text"></td>
                        <td></td>
                        <td>  <label class="control-label">工作类型：</label> </td>
                        <td>   <input name="lx" class="form-control" type="text"></td>
                    </tr>
                    <tr>
                        <td>
                            <label class="control-label">备注：</label>
                        </td>
                        <td colspan="4">
                            <textarea name="bz" class="form-control"></textarea>
                        </td>
                    </tr>

                </tbody>
            </table>
        </form>
    </div>


    <th:block th:include="include :: footer" />
    <th:block th:include="include :: datetimepicker-js" />
    <th:block th:include="include :: bootstrap-fileinput-js"/>
    <th:block th:include="include :: summernote-js" />

    <script th:inline="javascript">
        var prefix = ctx + "lwpq/jl"
        $("#form-jl-add").validate({
            focusCleanup: true
        });

        function submitHandler() {
            if ($.validate.form()) {
                $.operate.save(prefix + "/add", $('#form-jl-add').serialize());
            }
        }

        $("input[name='csrq']").datetimepicker({
            format: "yyyy-mm-dd",
            minView: "month",
            autoclose: true
        });

        $(".file-upload").fileinput({
            uploadUrl: ctx + 'common/upload',
            maxFileCount: 1,
            autoReplace: true
        }).on('fileuploaded', function (event, data, previewId, index) {
            $("input[name='" + event.currentTarget.id + "']").val(data.response.url)
        }).on('fileremoved', function (event, id, index) {
            $("input[name='" + event.currentTarget.id + "']").val('')
        })

        /*用户管理-头像*/
        function avatar() {
            var url = ctx + 'lwpq/jl/avatar?url='+$("input[name='avatar']").val();
            top.layer.open({
                type: 2,
                area: [$(window).width() + 'px', $(window).height() + 'px'],
                fix: false,
                //不固定
                maxmin: true,
                shade: 0.3,
                title: "修改头像",
                content: url,
                btn: ['确定', '关闭'],
                // 弹层外区域关闭
                shadeClose: true,
                yes: function(index, layero) {
                    var iframeWin = layero.find('iframe')[0];
                    iframeWin.contentWindow.submitHandler((res)=> {
                            $("input[name='avatar']").val(res);
                            $("#avatarImg").attr("src", res);
                        });
                },
                cancel: function(index) {
                    return true;
                }
            });
        }
    </script>
</body>
</html>